<template>
	<view>
		<!-- order订单页 -->
		<!-- 调用 tabs 组件 -->
		<tabs :tabs="tabs" :current="current" @change="changeTabsHandle" />
		<scroll-view scroll-y class="order">
			<view v-for="item in orders" :key="item.order_id" class="order_item">
				<view class="order_item_row">
					<text class="order_item_row_left">订单编号</text>
					<text class="order_item_row_right">{{ item.order_number }}</text>
				</view>
				<view class="order_item_row">
					<text class="order_item_row_left">订单金额</text>
					<text class="order_item_row_right goods_price">{{ item.order_price }}</text>
				</view>
				<view class="order_item_row">
					<text class="order_item_row_left">订单日期</text>
					<text class="order_item_row_right">{{ item.update_time_format }}</text>
				</view>
				<view class="order_item_row" v-if="item.pay_status === '0'">
					<text class="order_item_row_left">订单支付</text>
					<view class="order_item_row_right">
						<button size="mini" type="primary" @tap="payOrder(item.order_number)">付款</button>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	// 导入 tabs 组件
	import tabs from '@/components/tabs/main';
	// uni-app 行为写这里
	export default {
		// 注册 tabs 组件
		components:{
			tabs
		},
		data() {
			return {
				// tabs组件用于传递给子组件展示的数据
				tabs:[
					{ id:1, text:'全部' ,type:'1' },
					{ id:2, text:'待付款' ,type:'2' },
					{ id:3, text:'待发货' ,type:'3' },
				],
				// 页面参数
				options:'',
				// 用于给子组件展示的索引
				current: 0,
				// 订单数据
				orders: [],
			}
		},
		onLoad(options) {
			// 页面参数
			this.options = options;  // { type: 3 }
			// 获取 type 值
			const { type } = options;
			// 根据 type 值查找到索引
			const index = this.tabs.findIndex(item=>item.type === type);
			// 更新子组件的索引
			this.current = index;
			// console.log('当前页面参数对应的索引', index);
			// console.log('页面参数', options);
			this.getOrderData();
		},
		// uni-app 事件写到 methods 中
		methods: {
			// 根据订单编号付款
			async payOrder(order_number){
				try{
					// 1. 订单编号从参数中获取
					// console.log(order_number);
					// 2. 准备预支付参数
					const { pay } = await this.$https.post( '/my/orders/req_unifiedorder', { order_number }, );
					// 3. 唤起微信支付
					await wx.requestPayment({...pay});
					// 4. 更新订单状态
					const title = await this.$https.post( '/my/orders/chkOrder', { order_number } );
					uni.showToast({ title: title });
					// this.current = 2;
					// this.options.type = '3';
					// this.getOrderData();
					uni.redirectTo({ url: '/pages/order/main?type=3' });
				}catch(err){
					uni.showToast({ title: '支付失败', icon:'none' });
				}
			},
			// 点击 tabs 重新发送请求获取最新数据
			changeTabsHandle(index){
				// console.log('子组件传递过来的index',index);
				// 根据子组件回传的索引，找到父组件对应的 type 请求参数
				const { type } = this.tabs[index];
				// console.log('type',type);
				// 更新最新的 type 到 options 变量中
				this.options.type = type;
				// 更新新的 type 发送网络请求
				this.getOrderData();
			},
			// 获取订单数据
			async getOrderData(){
				// 传递页面参数查询对应订单
				const { orders } = await this.$https.get('/my/orders/all',{params:{ ...this.options }});
				// console.log(orders);
				// 遍历 order 订单数据
				orders.forEach(item=>{
					// 给 item 对象添加一个格式化后的时间
					item.update_time_format = new Date(item.update_time * 1000).toLocaleString();
				});
				// orders 订单数据绑定到 data 中
				this.orders = orders;
			}
		}
	}
</script>

<style lang="less">
	.order {
		height: calc(100vh - 88rpx);
		.order_item {
			padding: 30rpx;
			border-bottom: 1rpx solid #ddd;
			.order_item_row {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 50rpx;
				font-size: 30rpx;
				.order_item_row_left {
					color:#999;
				}

				.order_item_row_right {
					color:#333;
				}
			}
		}
	}
</style>
